<template>
  <sar-overlay
    :visible="visible"
    :z-index="zIndex"
    background="var(--sar-fab-mask)"
    @click="onOverlayClick"
  />

  <view :class="fabClass" :style="fabStyle">
    <view
      :class="contentClass"
      :style="contentStyle"
      @transitionend="onTransitionEnd"
    >
      <view
        v-for="(item, index) in itemList"
        :key="index"
        :class="itemClass"
        @click="onItemClick(item, index)"
      >
        <view v-if="!hideName" :class="bem.e('item-name')">
          {{ item.name }}
        </view>
        <view
          :class="bem.e('item-btn')"
          :style="
            stringifyStyle({ background: item.background, color: item.color })
          "
        >
          <sar-icon :family="item.iconFamily" :name="item.icon" />
        </view>
      </view>
    </view>
    <view :class="itemEntryClass" @click="onItemEntryClick">
      <view :class="bem.e('item-btn')" :style="itemEntryBtnStyle">
        <sar-icon :family="iconFamily || 'sari'" :name="icon || 'plus'" />
      </view>
    </view>
  </view>
</template>

<script>
import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
import { computed, reactive, ref, toRef } from "vue";
import { classNames, stringifyStyle, createBem, isNullish } from "../../utils";
import {
  defaultFabProps
} from "./common";
import { useTransition, useZIndex } from "../../use";
import SarIcon from "../icon/icon.vue";
import SarOverlay from "../overlay/overlay.vue";
/**
 * @property {string} rootClass 组件根元素类名，默认值：-。
 * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
 * @property {string} top 设置距离窗口顶部的距离，优先级比 `bottom` 高，默认值：-。
 * @property {string} right 设置距离窗口右边的距离，默认值：-。
 * @property {string} bottom 设置距离窗口底部的距离，默认值：-。
 * @property {string} left 设置距离窗口左边的距离，优先级比 `right` 高，默认值：-。
 * @property {string} color 设置按钮图标的颜色，默认值：-。
 * @property {string} background 设置按钮的背景色，默认值：-。
 * @property {string} icon 设置入口按钮的图标，默认值：-。
 * @property {string} iconFamily 设置入口按钮的图标族，默认值：-。
 * @property {FabItem[]} itemList 设置扩展按钮，默认值：[]。
 * @property {boolean} hideName 是否隐藏按钮名称，默认值：false。
 * @property {boolean} overlayClosable 点击遮罩是否隐藏扩展按钮，默认值：false。
 * @property {number} duration 扩展按钮显隐动画时长，单位 ms，默认值：150。
 * @event {(event: any) => void} click 点击入口按钮时触发
 * @event {(item: FabItem, index: number) => void} select 点击扩展按钮时触发
 */
export default  _defineComponent({
  components: {
    SarIcon,
    SarOverlay,
  },
  ...{
    options: {
      virtualHost: true,
      styleIsolation: "shared"
    }
  },
  __name: "fab",
  props:  _mergeDefaults({
    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
    rootClass: { type: String, required: false },
    top: { type: String, required: false },
    right: { type: String, required: false },
    bottom: { type: String, required: false },
    left: { type: String, required: false },
    color: { type: String, required: false },
    background: { type: String, required: false },
    icon: { type: String, required: false },
    iconFamily: { type: String, required: false },
    itemList: { type: Array, required: false },
    hideName: { type: Boolean, required: false },
    overlayClosable: { type: Boolean, required: false },
    duration: { type: Number, required: false }
  }, defaultFabProps()),
  emits: ["click", "select"],
  setup(__props, { expose: __expose, emit: __emit }) {
    __expose();
    const props = __props;
    const emit = __emit;
    const bem = createBem("fab");
    const visible = ref(false);
    const [zIndex, increaseZIndex] = useZIndex();
    const { realVisible, transitionClass, onTransitionEnd } = useTransition(
      reactive({
        visible,
        duration: toRef(() => props.duration),
        prefix: bem.m("zoom-")
      })
    );
    const onItemEntryClick = (event) => {
      if (props.itemList && props.itemList.length > 0) {
        visible.value = !visible.value;
        if (visible.value) {
          increaseZIndex();
        }
      }
      emit("click", event);
    };
    const onItemClick = (item, index) => {
      visible.value = false;
      emit("select", item, index);
    };
    const onOverlayClick = () => {
      if (props.overlayClosable) {
        visible.value = false;
      }
    };
    const fabClass = computed(() => {
      return classNames(
        bem.b(),
        bem.m(isNullish(props.top) ? "bottom" : "top"),
        bem.m(isNullish(props.left) ? "right" : "left"),
        bem.m("visible", visible.value),
        props.rootClass
      );
    });
    const fabStyle = computed(() => {
      return stringifyStyle(props.rootStyle, {
        zIndex: visible.value ? zIndex.value : null,
        top: props.top,
        left: props.left,
        right: !isNullish(props.left) ? "auto" : props.right,
        bottom: !isNullish(props.top) ? "auto" : props.bottom
      });
    });
    const contentClass = computed(() => {
      return classNames(bem.e("content"), transitionClass.value);
    });
    const contentStyle = computed(() => {
      return stringifyStyle({
        display: realVisible.value ? "flex" : "none",
        transitionDuration: props.duration + "ms",
        transformOrigin: `${isNullish(props.top) ? "bottom" : "top"} ${isNullish(props.left) ? "right" : "left"}`
      });
    });
    const itemEntryClass = computed(() => {
      return classNames(bem.e("item"), bem.em("item", "entry"));
    });
    const itemEntryBtnStyle = computed(() => {
      return stringifyStyle({
        color: props.color,
        background: props.background
      });
    });
    const itemClass = computed(() => {
      return classNames(bem.e("item"));
    });
    const __returned__ = { props, emit, bem, visible, zIndex, increaseZIndex, realVisible, transitionClass, onTransitionEnd, onItemEntryClick, onItemClick, onOverlayClick, fabClass, fabStyle, contentClass, contentStyle, itemEntryClass, itemEntryBtnStyle, itemClass, get stringifyStyle() {
      return stringifyStyle;
    }, SarIcon, SarOverlay };
    return __returned__;
  }
});
</script>

<style lang="scss">
@import './index.scss';
</style>